import React, { memo } from 'react'
import { useDispatch } from 'react-redux';

import { getSizeImage } from "@/utils/format-utils";
import { getSongDetailAction } from "@/pages/player/store/actionCreator";

import { TopRankingWrapper } from './style'


export default memo(function DTopRanking(props) {
  // state and props
  const { info } = props
  const { tracks = [] } = info

  //  redux hooks
  const dispatch = useDispatch()

  // other hooks

  // other handle
  const playMusic = (item) => {
    dispatch(getSongDetailAction(item.id))
  }

  return (
    <TopRankingWrapper>
      <div className="header">
        <div className="image">
          <img src={getSizeImage(info.coverImgUrl, 80)} alt="" />
          <div className="image_cover"></div>
        </div>
        <div className="info">
          <h3>{info.name}</h3>
          <div>
            <button className="btn play sprite_02"></button>
            <button className="btn favor sprite_02"></button>
          </div>
        </div>
      </div>
      <div className="list">
        {
          tracks.slice(0, 10).map((item, index) => {
            return (
              <div key={item.id} className="item-list">
                <div className="rank">{index + 1}</div>
                <div className="info">
                  <span className="name text-nowrap">{item.name}</span>
                  <div className="operate">
                    <button className="btn play sprite_02" onClick={e => playMusic(item)}></button>
                    <button className="btn addto sprite_icon2"></button>
                    <button className="btn favor sprite_02"></button>
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
      <div className="footer">
        <a href="/todo">查看全部&gt;</a>
      </div>
    </TopRankingWrapper>
  )
})
